<template>
	<view class="content">
		<view class="usersearch">
			<u-search placeholder="请输入搜索内容" v-model="keyword" @custom="usersearchclick(keyword)"></u-search>
		</view>
		 <scroll-view  scroll-x="true" style="padding: 20rpx 0;background: #fff;">
			 <view class="classification_list">
			 	<view class="classification_item" v-for="(item,index) in classification" :key="index">
					{{item}}
				</view>
			 </view>
		 </scroll-view>
		 <view class="warehousing_list">
		 	<view class="warehousing_item" v-for="(goodsitem,goodsindex) in goodslist" :key="goodsindex">
		 		<view class="warehousing_itemtop">
		 			<image :src="goodsitem.img" mode=""></image>
					<view class="warehousing_edit">
						<u-icon name="edit-pen" color="#9e9d9d" @click="goodsedit(goodsitem.id)"></u-icon>
						<u-icon name="trash" color="#fd8080" @click="goodsdel(goodsitem.id)"></u-icon>
						
					</view>
		 		</view>
				<view class="warehousing_itemcontent" @click="goodsdetails(goodsitem.id)">
					<view class="warehousing_content">
						<text>商品名称</text><text>{{goodsitem.name}}</text>
					</view>
					<view class="warehousing_content">
						<text>单价</text><text>¥{{goodsitem.dj}}</text>
					</view>
					<view class="warehousing_content">
						<text>数量</text><text>{{goodsitem.num}}</text>
					</view>
					<view class="warehousing_content">
						<text>总价</text><text>¥{{goodsitem.zj}}</text>
					</view>
					<view class="warehousing_content">
						<text>入库日期</text><text>{{goodsitem.time}}</text>
					</view>
				</view>
		 	</view>
		 </view>
		 <view class="goodsadd" @click="goodsaddclick()">
		 	新增
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				classification:["衣服","裤子","裙子","鞋子","饰品","包包","裤子","裙子","鞋子","饰品","包包"],
				goodslist:[
					{id:1,name:"某某某上衣1",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:2,name:"某某某上衣2",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:3,name:"某某某上衣3",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:4,name:"某某某上衣4",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:5,name:"某某某上衣5",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:6,name:"某某某上衣6",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:7,name:"某某某上衣7",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					{id:8,name:"某某某上衣8",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png"},
					
				]
			}
		},
		onLoad() {

		},
		methods: {
			//搜索
			usersearchclick(keyword){
				console.log(keyword)
			},
			goodsedit(id){
				uni.navigateTo({
					url:"../index_edit/index_edit?id="+id
				})
			},
			goodsdel(id){
				uni.showModal({
					title: '删除图片',
					 content: '确定要删除？',
					 showCancel: true,//是否显示取消按钮
					 cancelText:"否",//默认是“取消”
					 cancelColor:'skyblue',//取消文字的颜色
					 confirmText:"是",//默认是“确定”
					 confirmColor: 'skyblue',//确定文字的颜色
					 success:  (res)=> {
						if (res.cancel) {
						   //点击取消,默认隐藏弹框
						} else {
						   //点击确定
						   this.goodslist.map((item,index)=>{
						   	if(item.id == id){
						   		this.goodslist.splice(index,1)
						   	}
						   })
						}
					 },
					 fail: (res) =>{ },//接口调用失败的回调函数
					 complete:(res) =>{ },//接口调用结束的回调函数（调用成功、失败都会执行）
				})
				
			},
			goodsaddclick(){
				uni.navigateTo({
					url:"../index_add/index_add"
				})
			},
			goodsdetails(id){
				uni.navigateTo({
					url:"../index_details/index_details?id="+id
				})
			}
		}
	}
</script>

<style>
page{
	background: #f6f6f6;
}
.usersearch{
	width: 90%;
	padding: 2% 5%;
	background: #fff;
}
.classification_list{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.classification_item{
	margin: 0 20rpx;
	text-align: center;
}
.warehousing_list{
	width: 90%;
	margin: 0 5%;
}
.warehousing_item{
	background: #fff;
	margin: 20rpx 0;
	border-radius: 10rpx;
	box-shadow: 2rpx 2rpx 10rpx #eee;
	padding: 20rpx;
	padding-bottom: 0;
}
.warehousing_itemtop{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.warehousing_itemtop image{
	width: 150rpx;
	height: 150rpx;
	border-radius: 20rpx;
}
.warehousing_edit{
	width: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.warehousing_itemcontent{
	
}
.warehousing_content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #333;
}
.warehousing_content text:nth-child(1){
	
}
.warehousing_content text:nth-child(2){
	/* color: #9e9e9e; */
}
.goodsadd{
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 100rpx;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}
</style>
